<script>
import {toContent} from "@/js/blogUtils.js";

export default {
  name: "BlogItem",
  methods: {toContent},
  props: {
    blog: {
      type: Object,
      default: () => {}
    },
  }
}
</script>

<template>
  <div @click="toContent(blog.id)">
    <el-card style="width: 600px;height: 470px" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-row>
            <el-col :span="12">
              <el-avatar size="small" :src="blog.userEntity ? blog.userEntity.picture : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
            </el-col>
            <el-col :span="12" style="display: flex;justify-content: flex-end">
              <el-text>{{blog.createTime.slice(0, 10)}}</el-text>
            </el-col>
          </el-row>
        </div>
      </template>
      <el-image :src="blog.cover" style="height: 300px" />
      <template #footer>{{blog.title}}</template>
    </el-card>
  </div>
</template>

<style scoped>
</style>
